import React from 'react'
import './Footer.css'

class Footer extends React.Component {
    handleCheckAll = (event) => {
       const {target} = event
       this.props.checkAllTodo(target.checked)
    }
    // 删除所有已完成
    handleClearAllDone = () => {
      this.props.clearAllDone()
    }
    render() {
        const {todoList} = this.props
        const doneCount = todoList.reduce((pre, item) => pre + (item.done ? 1 : 0), 0)
        // console.log(doneCount)
        return (
            <div className="Footer">
                <p><input type="checkbox" onChange={this.handleCheckAll} checked={doneCount === todoList.length && todoList.length !== 0 ? true :false}/> 已完成 {doneCount} / 全部 {todoList.length}</p>
                <button style={{display:doneCount ? "block" : 'none'}} onClick={this.handleClearAllDone}>删除已完成</button>
            </div>
        )
    }
}

export default Footer